<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">幸运大转盘</view>
		</view>
		
		<!-- 转盘区域 -->
		<view class="wheel-container">
			<!-- 转盘背景 -->
			<image src="/static/wheel/wheel-bg.png" mode="aspectFit" class="wheel-bg"></image>
			
			<!-- 转盘指针 -->
			<image 
				src="/static/wheel/pointer.png" 
				mode="aspectFit" 
				class="wheel-pointer"
				:class="{ 'rotating': isRotating }"
				@click="startRotate"
			></image>
			
			<!-- 转盘主体 -->
			<view 
				class="wheel-body"
				:style="{ transform: `rotate(${rotateAngle}deg)` }"
			>
				<view 
					v-for="(prize, index) in prizes" 
					:key="index"
					class="prize-item"
					:style="getPrizeStyle(index)"
				>
					<image 
						:src="prize.icon" 
						mode="aspectFit" 
						class="prize-icon"
					></image>
					<text class="prize-text">{{prize.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 剩余次数 -->
		<view class="chance-info">
			<text>今日剩余{{chances}}次抽奖机会</text>
		</view>

		<!-- 中奖弹窗 -->
		<uni-popup ref="prizePopup" type="center" :mask-click="false">
			<view class="popup-content">
				<view class="popup-title">恭喜中奖</view>
				<view class="prize-info">
					<image 
						:src="currentPrize.icon" 
						mode="aspectFit" 
						class="prize-icon"
					></image>
					<text class="prize-name">{{currentPrize.name}}</text>
					<text class="prize-value" v-if="currentPrize.value">
						{{currentPrize.value}}金币
					</text>
				</view>
				<button class="confirm-btn" @click="closePopup">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: #FF6B6B;
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: #FF6B6B;
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.wheel-container {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 30px auto;
}

.wheel-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.wheel-pointer {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	z-index: 3;
	
	&.rotating {
		animation: pointer-shake 0.1s linear infinite;
	}
}

.wheel-body {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
	z-index: 2;
}

.prize-item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 50%;
	transform-origin: 0% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 50%;
	
	.prize-icon {
		width: 30px;
		height: 30px;
		margin-bottom: 5px;
	}
	
	.prize-text {
		font-size: 12px;
		color: #ffffff;
		text-align: center;
	}
}

.chance-info {
	text-align: center;
	font-size: 14px;
	color: #666666;
	margin-top: 20px;
}

.popup-content {
	width: 280px;
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
}

.popup-title {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30px;
}

.prize-info {
	margin-bottom: 30px;
	
	.prize-icon {
		width: 60px;
		height: 60px;
		margin-bottom: 15px;
	}
	
	.prize-name {
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		display: block;
		margin-bottom: 8px;
	}
	
	.prize-value {
		font-size: 24px;
		font-weight: bold;
		color: #FF6B6B;
	}
}

.confirm-btn {
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: #FF6B6B;
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}

@keyframes pointer-shake {
	0% { transform: translate(-50%, -50%) rotate(-5deg); }
	50% { transform: translate(-50%, -50%) rotate(5deg); }
	100% { transform: translate(-50%, -50%) rotate(-5deg); }
}
</style>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			rotateAngle: 0,
			isRotating: false,
			chances: 3,
			currentPrize: null,
			prizes: [
				{
					name: '10金币',
					icon: '/static/wheel/coin.png',
					value: 10,
					probability: 30
				},
				{
					name: '20金币',
					icon: '/static/wheel/coin.png',
					value: 20,
					probability: 20
				},
				{
					name: '50金币',
					icon: '/static/wheel/coin.png',
					value: 50,
					probability: 10
				},
				{
					name: '100金币',
					icon: '/static/wheel/coin.png',
					value: 100,
					probability: 5
				},
				{
					name: '谢谢参与',
					icon: '/static/wheel/thanks.png',
					probability: 20
				},
				{
					name: '再来一次',
					icon: '/static/wheel/again.png',
					probability: 15
				}
			]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 获取奖品样式
		getPrizeStyle(index) {
			const rotate = index * (360 / this.prizes.length);
			return {
				transform: `rotate(${rotate}deg) skewY(-${360 / this.prizes.length}deg)`
			}
		},
		
		// 开始抽奖
		startRotate() {
			if (this.isRotating || this.chances <= 0) return;
			
			this.isRotating = true;
			this.chances--;
			
			// 随机选择奖品
			const prize = this.getRandomPrize();
			const index = this.prizes.indexOf(prize);
			
			// 计算旋转角度
			const baseAngle = -(index * (360 / this.prizes.length) + 360 / this.prizes.length / 2);
			const extraAngle = 360 * 5; // 额外旋转5圈
			
			this.rotateAngle = baseAngle + extraAngle;
			
			// 记录中奖奖品
			this.currentPrize = prize;
			
			// 旋转结束后显示中奖信息
			setTimeout(() => {
				this.isRotating = false;
				this.$refs.prizePopup.open();
				
				// 如果中奖"再来一次"，增加抽奖机会
				if (prize.name === '再来一次') {
					this.chances++;
				}
			}, 4000);
		},
		
		// 随机获取奖品
		getRandomPrize() {
			const random = Math.random() * 100;
			let probabilitySum = 0;
			
			for (const prize of this.prizes) {
				probabilitySum += prize.probability;
				if (random < probabilitySum) {
					return prize;
				}
			}
			
			return this.prizes[0];
		},
		
		// 关闭弹窗
		closePopup() {
			this.$refs.prizePopup.close();
		}
	}
}
</script> 